/**
 * Component() 用于创建一个组件
 *    组件实例对象上有一个 data 与 properties 属性，这两个属性的值是一样的。
 */
Component({
  // 外部扩展类
  externalClasses: ['my-class'],

  /**
   * 组件的属性列表
   *    1. 可以通过 this.setData() 来修改，原因是生命的 prop 会放置到 data 中
   *        （但是最好不要这样操作）
   */
  properties: {
    title: {
      type: String, // 属性类型
      value: '标题', // 属性默认值
      optionalTypes: [Number], // 额外的属性类型, 该 title 既可以是 String，又可以是 Number
      // 监听该属性的变化, 默认会触发一次
      observer: (newVal, oldVal) => {
        console.log('title observer')
        console.log('newValue', newVal)
        console.log('oldVal', oldVal)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    msg: '张三'
  },

  /**
   * 数据的监听
   *  1. 类似于 props 中 observer ，但是没有 oldVal
   *  2. 可以监听多个字段
   *    'numberA, numberB': () => {}
   *  3. 可以监听对象的属性
   *    'obj.a': () => {}
   *  4. 可以监听数组的下标
   *    'arr[1]': () => {}
   *  5. 可以通过 ** 来监听全部数据
   *    '**': () => {}
   *    'obj.**': () => {}
   *  6. 类似Vue中Watch，但没有 deep 与 immediate 配置。
   */
  observers: {
    msg: (newVal, oldVal) => {
      console.log('msg observer')
      console.log('newVal', newVal)
      console.log('oldVal', oldVal)
    },
    "**": (newVal, oldVal) => {
      console.log('** 改变')
      console.log('newVal', newVal)
      console.log('oldVal', oldVal)
    }
  },

  /**
   * 组件的方法列表
   *  1. 与页面不同，事件处理函数之类的方法需要声明在 methods 选项中
   */
  methods: {
    fn1() {
      console.log('fn1', this)
      this.setData({
        title: '我的天',
        msg: '里斯'
      })
    }
  },

  /**
   * 组件的生命周期
   * 1. created     *组件创建
   * 2. attached    *组件挂载     mounted
   * 3. detached    *组件卸载     unmounted
   * 4. moved        组件移动
   * 5. ready        初次渲染完成
   * 
   * 在某个版本之后，推荐将组件生命周期的钩子声明到 lifetimes 配置中
   */
  lifetimes: {
    created() {
      console.log('life created')
    },
  
    attached() {
      console.log('life attached')
    },
  
    detached() {
      console.log('life detached')
    },
  
    ready() {
      console.log('life ready')
    },
  
    moved() {
      console.log('life moved')
    }
  },
  /**
   * 组件所在页面的生命周期
   */
  pageLifetimes: {
    // 页面的 onShow 触发
    show() {
      console.log('life page show') 
    },
    // 页面的 onHide 触发
    hide() {
      console.log('life page hide')
    },
    // 页面的 onResize 触发
    resize() {
      console.log('life page resize')
    },
    // 页面的 onRouteDone 触发
    routeDone() {
      console.log('life page routeDone')
    }
  }
})
